<script setup lang="ts">
import { ref, computed } from "vue"
import { Input, InputProps } from "ant-design-vue"
import { ChangeEvent } from "ant-design-vue/es/_util/EventInterface"
import { useComputedBordered } from "@/composables/input-bordered"

export type Props = InputProps

const model = defineModel<InputProps["value"]>()

const props = withDefaults(defineProps<Props>(), {
  bordered: false,
  allowClear: true,
  placeholder: "请输入",
})

const computedProps = computed<Omit<InputProps, "value">>(() => {
  const result = { ...props }
  delete result.value
  delete result["onUpdate:value"]
  delete result.onChange
  return result
})

const slots = defineSlots<InstanceType<typeof Input>["$slots"]>()

const { computedBordered } = useComputedBordered(props)

const emit = defineEmits(["change"])

function onChange(event: ChangeEvent) {
  emit("change", event.target.value)
}

const inputRef = ref()

function focus() {
  inputRef.value.focus()
}

defineExpose({ focus })
</script>

<template>
  <Input
    ref="inputRef"
    v-model:value="model"
    v-bind="computedProps"
    :bordered="computedBordered"
    :allowClear="props.allowClear"
    :placeholder="props.placeholder"
    @change="onChange"
  >
    <template v-for="key in Object.keys(slots)" :key="key" #[key]="params">
      <slot :name="key" :key="key" v-bind="params"></slot>
    </template>
  </Input>
</template>
